import * as echarts from 'echarts/core';
import TitleCard from '@/pages/components/TitleCard';
import ChartCard from './ChartCard';

const VipChartCard = () => {
  // * 获取当前月过去一年的年月
  const generatePastYearMonths = () => {
    const months = [];
    const currentDate = new Date();
    for (let i = 0; i < 12; i++) {
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1;
      const formattedMonth = month < 10 ? `0${month}` : `${month}`;
      const formattedDate = `${year}-${formattedMonth}`;
      months.unshift(formattedDate);
      currentDate.setMonth(currentDate.getMonth() - 1); // 当前日期减去一个月
    }
    return months;
  };
  const option = {
    color: ['#4387fb'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    legend: {
      data: [
        { name: '会员数', icon: 'roundRect' },
        { name: '会员率', itemStyle: { color: 'rgb(128, 255, 165)' } },
      ],
    },
    xAxis: [{ type: 'category', data: generatePastYearMonths(), axisTick: { alignWithLabel: true } }],
    yAxis: [
      { type: 'value', name: '会员数', axisLabel: { formatter: '{value} 人' } },
      { type: 'value', name: '会员率', axisLabel: { formatter: '{value} %' } },
    ],
    series: [
      {
        name: '会员数',
        type: 'bar',
        barWidth: '40%',
        data: [100, 52, 200, 334, 390, 330, 220, 325, 135, 267, 131, 220],
        tooltip: {
          valueFormatter: (value: number) => value + '人',
        },
      },
      {
        name: '会员率',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: { width: 0 },
        showSymbol: false,
        yAxisIndex: 1, // 默认0 多y轴情况下 需更改
        areaStyle: {
          opacity: 0.4,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(128, 255, 165)' },
            { offset: 1, color: 'rgb(1, 191, 236)' },
          ]),
        },
        emphasis: { focus: 'series' },
        data: [20, 16, 28, 36, 90, 33, 27, 45, 49, 67, 89, 66],
        tooltip: {
          valueFormatter: (value: number) => value + '%',
        },
      },
    ],
  };
  return (
    <div className="w-full">
      <TitleCard title="会员新增数据" />
      <ChartCard option={option}></ChartCard>
    </div>
  );
};
export default VipChartCard;
